<template>
  <el-container>
    <el-card style="width: 85%" :body-style="{width: '1130px'}">
      <!-- 图片展示 -->
      <!-- 文档怎么展示？ -->
      <div v-if="this.type === 'img'" class="img-show">
        <img :src="GLOBAL_BASE_URL + '/' + workInfo.workAddress" class="image">
        <!-- <img :src="'http:\\\\localhost:8080\\' + workInfo.workAddress" class="image"> -->
      </div>
      <div v-if="this.type === 'txt'" class="txt-show">
        <iframe :src="GLOBAL_BASE_URL + '/' + workInfo.workAddress" class="txt"/>
        <!-- <iframe :src="'http:\\\\localhost:8080\\' + workInfo.workAddress" class="txt"/> -->
      </div>
      <div class="info-show">
        <p class="title">{{workInfo.workName}}</p>
        <div class="author-show">
          <!-- 用户头像地址要获取 -->
          <img class="avatar" src="../assets/img_wrap.jpg" alt="">
          <span class="name">{{ workInfo.authorName }}</span>
          <br>
          <span class="time">{{ workInfo.workTime }} 上传</span>
        </div>
        <el-button type="primary" @click="download()">下载{{workInfo.workType}}</el-button>
        <div class="tag-show">
          <span class="title">作品标签:</span>
          <el-tag :key="index" v-for="(tag, index) in workInfo.workLabels" size="small">{{tag}}</el-tag>
        </div>
        <div class="desc-show">
          <span class="title">作品简介:</span>
          <span class="desc">
            {{ workInfo.workDescription }}
          </span>
        </div>
      </div>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      GLOBAL_BASE_URL: this.GLOBAL.BASE_URL,
      // 作品id
      type: '',
      fileId: '',
      workInfo: {
        workName: '作品名称',
        authorName: '作者',
        userType: '普通用户',
        workTime: '2020-3-17',
        workType: '图片',
        workLabels: ['风景', '学术'],
        workDescription: '这里是作品简介……',
        workStatus: ''
      },
      check: false
    }
  },
  mounted () {
    this.userId = this.$route.params.id
    this.type = this.$route.params.type
    this.fileId = this.$route.params.fileId
    this.getImg()
  },
  methods: {
    // 下载，根据id下载图片
    getImg () {
      this.$axios({
        methods: 'POST',
        url: '/user/getImg',
        params: {
          fileId: this.fileId
        }
      }).then(res => {
        console.log(res)
        this.check = res.data.data[0]
        // this.check = res.data.code
        if (this.check === true) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.workInfo = res.data.data[1]
          // this.workInfo = res.data.data
          // this.imgUrl = 'data:image/' + this.fileName.substring(this.fileName.length - 3) + ';base64,' + res.data.data[1]
        }
      }).catch(err => {
        if (err.response) {
          console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          }
        }
      })
    },
    download () {
      const a = document.createElement('a')
      a.href = this.GLOBAL_BASE_URL + '/user/download/' + this.fileId
      // a.href = 'http://localhost:8080/user/download/' + this.fileId
      a.click()
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  display: flex;
  justify-content: center;
}

.el-card {
  display: flex;
}

.el-card span {
  font-size: 17px;
}

.el-card .img-show {
  // width: 650px;
  width:60%;
  height: 400px;
  float: left;
  margin-right: 30px;
}

.el-card .img-show img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  // width: 100%;
  // height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.el-card .txt-show{
  width:60%;
  height: 400px;
  float: left;
  margin-right: 30px;
}

.el-card .txt-show iframe {
  width: 100%;
  height: 100%;
  // width: auto;
  // height: auto;
  // max-width: 100%;
  // max-height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-card .info-show{
  float: right;
  width: 35%;
  // display: flex;
}
.el-card .info-show p {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight:bold
}

.el-card .info-show .author-show {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.el-card .info-show .author-show img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-card .info-show .author-show .name {
  margin-right: 10px;
  font-size: 16px;
}

.el-card .info-show .author-show .time {
  font-size: 14px;
  color: #666;
}

.el-card .el-button{
  margin-bottom: 20px;
}

.el-card .info-show .tag-show {
  display: flex;
  margin-bottom: 20px;
  .el-tag {
    font-size: 14px;
    margin-left: 10px;
  }
}

.el-card .info-show .desc-show span:last-child {
  font-size: 16px;
  display: flex;
}

.el-card .info-show span:first-child {
  margin-right: 10px;
  font-size: 16px;
}
</style>
